'use client'
import { Navbar } from 'flowbite-react'
import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { FaBook, FaGraduationCap, FaHome,FaChartLine } from 'react-icons/fa'

export default function Banner() {
  const pathname = usePathname()

  return (
    <Navbar fluid className="border-b bg-white">
      <div className="max-w-6xl w-full mx-auto flex justify-between items-center">
        <Navbar.Brand as={Link} href="/">
          <FaBook className="text-2xl text-blue-600 mr-2" />
          <span className="self-center text-xl font-semibold whitespace-nowrap">
            Anki 记忆卡片
          </span>
        </Navbar.Brand>
        <div className="flex gap-4">
          <Link 
            href="/anki/decks" 
            className={`flex items-center px-3 py-2 rounded-lg hover:bg-gray-50 ${
              pathname === '/anki/decks' ? 'text-blue-600' : 'text-gray-700'
            }`}
          >
            <FaHome className="mr-2" />
            卡片管理
          </Link>
          <Link 
            href="/anki/study"
            className={`flex items-center px-3 py-2 rounded-lg hover:bg-gray-50 ${
              pathname === '/anki/study' ? 'text-blue-600' : 'text-gray-700'
            }`}
          >
            <FaGraduationCap className="mr-2" />
            开始学习
          </Link>
          <Link 
            href="/anki/stats"
            className={`flex items-center px-3 py-2 rounded-lg hover:bg-gray-50 ${
              pathname === '/anki/stats' ? 'text-blue-600' : 'text-gray-700'
            }`}
          >
             <FaChartLine />
             学习统计
          </Link>

        </div>
      </div>
    </Navbar>
  )
}